<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${ctx }/js/jquery.svg.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${ctx }/js/raphael-min.js"></script>
<style>
<!--
  .showP{
    border-top-style:dashed; 
    border-bottom-style:dashed; 
    border-right-style:dashed; 
    border-left-style:dashed; 
    }
  .showPClick{
    border-top-style:dashed; 
    border-bottom-style:dashed; 
    border-right-style:dashed; 
    border-left-style:dashed; 
    } 
    
-->
</style>

<script type="text/javascript">

var static_idx="";
$(document).ready(function(){
	<c:if test="${param.returnCd=='0000' }">alert('수정했습니다');</c:if>
	
	$(document).dblclick(function(e){
		if(""!=static_idx){
			paths.push({x:e.pageX,y:e.pageY});
			showPoint();
		}
	});
	
});

var paths = [];
//이미지 로딩후 실행
$(window).load(function (){
	$( "#aa" ).offset({left:$("#imgBackGround").width()}).show();
	
	var img = document.getElementById("imgBackGround");
	
    var newImg = new Image();
    newImg.src = img.src;
    var height = newImg.height;
    var width = newImg.width;
    
	var paper = Raphael("divBackImg", width, height);
	
    img.style.display = "none";
//     var r = Raphael("holder", 600, 540);
    var width, height;  
    
    paper.image(img.src, 0, 0, width, height);

    //${group}
    
<c:if test="${group !=null && fn:length(group)>0 }">
	<c:forEach var="map1" items="${group}" varStatus="status">
	var polyon = getPolygon("${map1.coord}");//"M10 10L20 10L50 30L10 50L10 10";
    var comb = paper.path(polyon).attr({fill:"rgb(255,255,193)",opacity: .5});
    
    comb.mouseover(function(event){
        this.attr({fill:"rgb(255,128,64)"});
    });
    comb.mouseout(function(event){
        this.animate({fill:"rgb(255,255,193)"},500);
    });
    var attr = {font: "20px Helvetica", opacity: 0.5};
    var fPoint = getCenter("${map1.coord}");
    paper.text(fPoint.x, fPoint.y, "${map1.group_nm}").attr(attr).attr({fill: "#0f0"});
	</c:forEach>
</c:if>
    
});

function getPolygon(paramPath){
	var polygon = "";
	var arList = paramPath.split(",");
	for(var i = 0; i< arList.length;i++){
		var coord = arList[i].split(" ");
		if(i==0){
			polygon+="M"+coord[0]+" "+coord[1];
		}else{
			polygon+="L"+coord[0]+" "+coord[1];
		}
	}
	return polygon;
}

function getCenter(paramPath){
	var returnPoint = {x:0,y:0, minX:0, maxY:0,minX:0,maxY:0};
	var arList = paramPath.split(",");
	
	for(var i = 0; i< arList.length;i++){
		var coord = arList[i].split(" ");
		if(i==0){
			returnPoint.minX=Number(coord[0]);
			returnPoint.minY=Number(coord[1]);
			returnPoint.maxX=Number(coord[0]);
			returnPoint.maxY=Number(coord[1]);
		}else{
			if(Number(coord[0]) > returnPoint.maxX){
				returnPoint.maxX = coord[0];
			}
			if(Number(coord[0]) < returnPoint.minX){
				returnPoint.maxX = coord[0];
			}
			if(Number(coord[1]) > returnPoint.maxY){
				returnPoint.maxY = coord[1];
			}
			if(Number(coord[1]) < returnPoint.minY){
				returnPoint.minY = coord[1];
			}
		}
	}
	returnPoint.x = (Number(returnPoint.minX)+Number(returnPoint.maxX)) /2
	returnPoint.y = (Number(returnPoint.minY)+Number(returnPoint.maxY)) /2
	return returnPoint;
}


function setRoom(idx){
	static_idx = idx;
	if("설정"==$("#setTxt_"+idx).html()){
		$(".delPoint").remove();
		paths=[];
		$("#setTxt_"+idx).html("저장");
	}else{
		if(paths.length>3){
			if(confirm("저장하시겠습니까?")){
				var pointsHtml = "";
				
				for(var i = 0; i < paths.length ;i++){
					var point = paths[i];
					if(i!=0){
						pointsHtml+=",";
					}
					pointsHtml+=point.x+" "+ point.y;
				}
				pointsHtml+=","+paths[0].x+" "+ paths[0].y;
				
				var html="";
				html+="<input name='p_id' value='${param.p_id}'>";
				html+="<input name='pg_no' value='"+idx+"'>";
				html+="<input name='coord' value='"+pointsHtml+"'>";
				$("#frmData").html(html);
				$("#frmData").submit();
			}
		}else{
			alert("좌표를 다시 선택하세요");
		}
// 		$("#setTxt_"+idx).html("설정");
	}
}

function saveRoom(){
	if(confirm("저장하시겠습니까?")){
		$("#frmSave").submit();
	}
}

function showPoint(){
	$(".delPoint").remove();
	for(var i = 0; i < paths.length ;i++){
		coord = paths[i];
		$("body").append("<div id='pointImg_"+$(this).find("input[name='pr_nos']").val()+"' "+
		"class='delPoint' style=\"font-size: 14;position: absolute;top: "+
		coord.y+
		"px;left:"+coord.x+
		"px;\"><img src=\"/usr/images/sim_1.png\" style=\"width:10px;opacity:.8;filter:alpha(opacity=80);\" />"+
		i
		+"</div>");	
	}
// 	$(".points").each(function (){
// 		if($(this).find("input[name='x_coods']").val()!="0" &&
// 			$(this).find("input[name='y_coods']").val()!="0"){
// 			$("body").append("<div id='pointImg_"+$(this).find("input[name='pr_nos']").val()+"' "+
// 					"class='delPoint' style=\"font-size: 14;position: absolute;top: "+
// 					$(this).find("input[name='y_coods']").val()+
// 					"px;left:"+$(this).find("input[name='x_coods']").val()+
// 					"px;\"><img src=\"/usr/images/sim_1.png\" style=\"opacity:.8;filter:alpha(opacity=80);\" />"+
// 					$(this).find("input[name='nm']").val()
// 					+"</div>");	
// 		}
// 	});
	
// 	$( ".delPoint" ).draggable({
// 		drag: function() {
// 			$(".room_no_"+$(this).attr("id").replace("pointImg_","")).find("input[name='x_coods']").val($(this).offset().left);
// 			$(".room_no_"+$(this).attr("id").replace("pointImg_","")).find("input[name='y_coods']").val($(this).offset().top);
// 		}
// 	});
}

function chkPoint(type, key){
	if("Y"==type){
		$("#pointImg_"+key).addClass("showP");
	}else{
		$("#pointImg_"+key).removeClass("showP");
	}
}
</script>




<input name="" id="x" type="hidden" >
<input name="" id="y" type="hidden" >
<!-- petc0105T -->
<div style="position:absolute;top: 0px;left:0px;" id="divBackImg">
	<img src="${map.c_back_img}" id="imgBackGround">

</div>

<div id="aa" style="position: absolute;top: 30;left:0;background-color: aqua;display: none;">
<form id="frmSave" action="./petc0108T.do">
	<input name="p_id" value="${param.p_id}" type="hidden" />
	<input name="pg_no" value="${param.pg_no}" type="hidden" />
	<table style="width: 400">
		<colgroup>
			<col width="200">
		</colgroup>
		<tr>
			<th>그룹명</th>
			<th>설정</th>
		</tr>
<c:if test="${group !=null && fn:length(group)>0 }">
	<c:forEach var="map1" items="${group}" varStatus="status">
		<tr class="room_no_${map1.pr_no } points">
			<td style="font-size: 14">${map1.group_nm }</td>
			<td>
				<div style="display: none;">
				<input name="nm" value="${map1.room_nm }" />
				<input name="pr_nos" value="${map1.pr_no }" type="hidden" />
				x:<input name="x_coods" value="${map1.x_cood }<c:if test="${empty map1.x_cood }">0</c:if>" type="text" size="10">
				y:<input name="y_coods" value="${map1.y_cood }<c:if test="${empty map1.y_cood }">0</c:if>" type="text" size="10">
				</div>
				<a href="#" onclick="setRoom('${map1.pg_no }')" id="setTxt_${map1.pg_no }">설정</a>
			</td>
		</tr>
	</c:forEach>
</c:if>
	</table>
</form>
</div>

<form action="./petc0112T.do" id="frmData" name="frmData" method="post">

</form>
